<template>
	<u-popup :show="show" mode="bottom" round="30" :closeable="closeable" @close="closePop"
		:safeAreaInsetBottom="false">
		<view class="pop-box">
			<view class="pop-title">{{title}}</view>
			<scroll-view scroll-y="true" class="pop-main">
				<view class="for-box" v-for="(v,i) in dataList" :key="v.id" @click="tabCheck(v,i)">
					<view>{{v[field]}}</view>
					<view class="mr">
						<view class="check" v-show="checkIndex==i">
							<image :src="imgData.checkImg" mode=""></image>
						</view>
						<view v-show="checkIndex!=i" class="hollow-circle"></view>
					</view>
				</view>
			</scroll-view>
			
		</view>
		<view class="determine" @click="determineFn">确定</view>
	</u-popup>
</template>

<script>
	import imgData from "./image.js"
	export default {
		props: {
			// 是否打开选择框
			show: {
				default: false,
				type: Boolean
			},
			// 数据列表
			dataList: {
				default: () => [],
				type: Array
			},
			// 选择框标题
			title: {
				default: '这是选择框标题',
				type: String
			},
			// 是否显示x关闭按钮
			closeable: {
				default: false,
				type: Boolean
			},
			// 自定义展示字段
			field: {
				default: 'label',
				type: String
			}
		},
		data() {
			return {
				imgData,
				checkIndex: 0
			}
		},
		created() {

		},
		methods: {
			// 切换选择项
			tabCheck(val, inx) {
				// console.log(val, inx);
				this.checkIndex = inx
			},
			// 确定选择
			determineFn() {
				let value = this.dataList[this.checkIndex]
				// console.log('value', value);
				this.$emit('determine',value,this.checkIndex)
			},
			// 关闭弹窗
			closePop(){
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pop-box {
		min-height: 500rpx;
		padding: 40rpx 30rpx 48rpx;

		.pop-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #1A1A1A;
			text-align: center;
			margin-bottom: 40rpx;
			
		}

		.pop-main {
			// overflow-y: scroll;
			max-height: 600rpx;
			padding-right: 40rpx;

			.for-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 32rpx 0;
				border-bottom: 1rpx solid rgba(240, 242, 245, 1);

				.mr {
					margin-right: 40rpx;
				}

				.check {
					width: 32rpx;
					height: 32rpx;
					position: relative;
					background: $c-bgColor;
					border-radius: 50%;
					image{
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						z-index: 2;
					}
				}

				.hollow-circle {
					border: 2rpx solid rgba(27, 27, 27, 1);
					border-radius: 50%;
					width: 26rpx;
					height: 26rpx;
				}

				.course {
					font-size: 32rpx;
					font-weight: bold;
					color: rgba(26, 26, 26, 1);

					.symbol {
						font-size: 24rpx;
						color: rgba(255, 41, 41, 1);
					}

					.price {
						color: rgba(255, 41, 41, 1);
					}
				}

			}


		}

		

	}
	.determine {
		// margin-top: 40rpx;
		// margin-right: 40rpx;
		width: 686rpx;
		height: 96rpx;
		background: $c-bgColor;
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		border-radius: 16rpx;
		margin-bottom: 32rpx;
	}
</style>